<template>
  <div>

    <mh></mh>

    <main class="" id="main-collapse">

    <div class="hero-full-wrapper">
       <div v-masonry transition-duration="0.3s" item-selector=".grid-item" class="grid">
       <div class="gutter-sizer"></div>
         <div class="grid-sizer"></div>
         <!--动态拼接页面-->
         <div v-masonry-tile class="grid-item" v-for="(item,index) in lists">
           <img class="img-responsive" alt="" :src="'http://localhost:8000/static/upload/'+item.img">
           <a :href="'http://localhost:8080/detail?id='+item.id" class="project-description">
             <div class="project-text-holder">
               <div class="project-text-inner">
                 <h3>{{ item.title }}</h3>
                 <p>{{ item.desc }}</p>
               </div>
             </div>
           </a>
         </div>
         
       </div>
     </div>
     <p></p>
      <div >
        <!-- <p>分页:{{ pagination }}</p> -->
        <p><Pagination v-model="pagination" @change="change"></Pagination></p>

      </div>
      <br><br><br>
      <p></p>
      <!--自定义分页-->
      <div>
        <a v-show="lastpage" @click="mychange(lastpage)">上一页</a>

        <!--数字分页-->
        <ul>
          <li v-for="index in all">
            <a @click="mychange(index)">{{ index }}</a>

          </li>
        </ul>
        <a v-show="nextpage" @click="mychange(nextpage)">下一页</a>

      </div>
    </main>

  </div>
</template>

 
<script>
import mh from './mh.vue'
export default {
  data () {
    return {
      msg: "这是一个变量",
      lists:[],
      pagination:{
        // 当前页
        page:1,
        // 每页条数
        size:1,
        // 总个数
        total:0
      },
      // 总条数
      total:0,
      // 当前页
      cur:1,
      // 总页数
      all:0,
      lastpage:0,  // 上一页
      nextpage:0   // 下一页
    }
  },
  mounted(){
    // 调用一次自定义分页
    this.mychange=(1);



    //获取数据
    this.axios.get('http://localhost:8000/courseList/',{params:{page:this.pagination.page,
    size:this.pagination.size}}).then((result)=>{

      // console.log(result);

      // 赋值
      this.lists = result.data.data;
      this.pagination.total =result.data.total;

    });
  },
  methods:{
    // 自定义分页
    mychange(page){
      //获取数据
      this.axios.get('http://localhost:8000/courseList/',{params:{page:page,
      size:1}}).then((result)=>{

        // 赋值
        this.lists = result.data.data;
        // 判断上一页
        if (page==1) {
          this.lastpage = 0;

        }else{
          this.lastpage = page - 1;
        }
        // 计算总页数  向上取整
        this.all = Math.ceil(result.data.total / 1);
        // 判断下一页
        if (page==this.all) {
          this.nextpage = 0;
        }else{
          this.nextpage = page + 1;
        }

      });


    },



    // 分页触发方法
    change(){
      //获取数据
      this.axios.get('http://localhost:8000/courseList/',{params:{page:this.pagination.page,
      size:this.pagination.size}}).then((result)=>{

        // console.log(result);

        // 赋值
        this.lists = result.data.data;
        // this.pagination.total = result.data.total;

      });
    },
    changetest(index){
      this.clicked = index;
    },

  },
  components:{
    'mh':mh
  }
}


</script>
 
<style>



</style>